@import 'tailwindcss';
@import './transitions.css';

@plugin 'daisyui' {
  exclude: rootscrollgutter, scrollbar;
}

@plugin 'daisyui/theme' {
  name: 'light';
  default: true;

  --color-base-400: oklch(92% 0 0);
  --color-primary: var(--color-brand-primary);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: var(--color-brand-secondary);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(51% 0.262 276.966);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(68.98% 0.167856 252.1779);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(73.06% 0.1911 137.23);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(87% 0.169 91.605);
  --color-warning-content: oklch(100% 0 0);
  --color-error: oklch(64% 0.246 16.439);
  --color-error-content: oklch(100% 0 0);
  --radius-field: 0.5rem;
  --radius-box: 1rem;
}

@theme {
  --default-transition-duration: 300ms;

  --color-brand-primary: #f5873c;
  --color-brand-secondary: #e57429;

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@utility animate-enter {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@utility flex-center {
  @apply flex items-center justify-center;
}

@utility flex-between {
  @apply flex items-center justify-between;
}

@utility btn-ghost {
  @apply hover:bg-primary/10 text-primary border-none;
}

@utility divider {
  --divider-m: 0;
  &:before,
  &:after {
    height: 1px;
  }
}

@utility menu {
  --menu-active-bg: var(--color-primary);
  --menu-active-fg: inherit;
  line-height: 2;
  border-radius: var(--radius-field);
}

@utility navbar {
  a {
    @apply relative;

    &::after {
      content: '';
      @apply bg-primary absolute right-0 bottom-0 left-0 h-0.5 origin-bottom scale-y-0 transition-transform;
    }

    &.nav-active::after {
      @apply scale-y-100;
    }
  }
}

@layer base {
  html {
    scrollbar-gutter: stable;
  }

  body {
    font-family: 'Roboto', sans-serif;
  }

  ::-webkit-scrollbar {
    @apply h-2 w-2;
  }

  ::-webkit-scrollbar-track {
    @apply border-none bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-base-content/20 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-base-content/40;
  }

  ::-webkit-scrollbar-corner {
    @apply border-none bg-transparent;
  }

  .top-line {
    @apply relative;
    &::before {
      content: '';
      @apply absolute -top-0.5 right-0 left-0 border-t-2;
    }
  }
}
